<!DOCTYPE html>
<!--han games-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>躲避外星人</title>
	<link href="css/ste.css" rel = "stylesheet" type="text/css">
	<style>
		html,body{
			height: 100%;
			margin: 0;
			padding: 0;
		}
		
		#icon_1{position: absolute;top: 1px;left: 1%;z-index: 997;display: none;}
        #icon_2{position: absolute;top: 1px;right: 1%; z-index: 996;display: none;}
		#bg-canvas{margin:auto; position: absolute; z-index:-10;width: 100vw;top:0px;left:0px;height:100vh;}
		@media (min-width: 1365px) and (max-width: 1400px) {
        #bg-canvas{height:110vh;}
         }
		 @media (min-width: 1400px) and (max-width: 1510px) {
        #bg-canvas{height:125vh;}
         }
		@media (min-width: 1025px) and (max-width: 1364px) {
        #bg-canvas{height:104vh;}
		}
		 @media (min-width: 767px) and (max-width: 991px) {
		 #bg-canvas{height:100vh;}
		}
		@media (min-width: 1510px) and (max-width: 1920px) {
		 #bg-canvas{height:110vh;}
		}
	</style>
	<script src="js/jquery.min.js"></script>
	<script src="js/create.js"></script>
	<script src="js/common.js"></script>
	<script src="js/stbg.js"></script>
	<script src="js/phaser.min.js"></script>
</head>
<body>
	<div id="container">
	</div>
 <div id="instructions" style="display: none;">
        <div class="select" style="display: none;">
        </div>
        <div id="instruction1" style="display: block;">
            <div class="indent" style="margin-top: 20px;">
                请观察星星的状态或运动方式,找出状态或运动不同的星星,迅速点击屏幕,找对有惊喜！
            </div>
            <div class="start"></div>
        </div>
        <div id="instruction2">
            <div class="indent">
                请观察星星的状态或运动方式,找出状态或运动不同的星星,迅速点击屏幕,找对有惊喜！
            </div>
            <div class="instruct-confirm"></div>
        </div>
    </div>

	<div id="icon_1"><img src="image/help2.png"></div>
    <div id="icon_2"> <a href="index.html"><img src="image/reset1.png"></a></div>
	   <canvas id="bg-canvas" width="1024" height="720" ></canvas>
	<script>
	window.handleResize = function () {
    if (window.innerWidth < window.innerHeight * 1024 / 768) {
        $("#container").css({
            "height": "auto",
            "width": "99.9vw"
        });
    }
};
window.addEventListener('resize', handleResize, false);
window.handleResize();

	// 背景控件
	$(document).ready(function () {
	$("#icon_1").click(function () {
		$("#instructions").show();

		$("#container").hide();
	});
	$(".start").click(function () {
		$("#container").show();
		$("#instructions").hide();
	});
});
function canvasBgone() {
	var config = {
		barWidth: 5,
		deltaTime: 400,
		showTimes: 8
	};
	if (window.stbg) stbg.removeSelf();
	window.stbg = new STBG(config);
}
function canvasBgtwo() {
	var config = {
		barWidth: 10,
		deltaTime: 400,
		showTimes: 8
	};
	if (window.stbg) stbg.removeSelf();
	window.stbg = new STBG(config);
}
function canvasBgthree() {
	var config = {
		barWidth: 15,
		deltaTime: 400,
		showTimes: 8
	};
	if (window.stbg) stbg.removeSelf();
	window.stbg = new STBG(config);
}
function canvasBgfour() {
	var config = {
		barWidth: 20,
		deltaTime: 400,
		showTimes: 8
	};
	if (window.stbg) stbg.removeSelf();
	window.stbg = new STBG(config);
}
// var timer;
// var total = 0;
document.body.style.margin = "0px";
onload = function () {
	/////////////////////////////SET///////////////////////////////////////////
	var loading;
	var progressText;
	////////////////////////////BOOTSTATE//////////////////////////////////////
	var bootState = function bootState(game) {
		this.preload = function () {
			game.load.image('loading', './assets/preloader.gif');
		};
		this.create = function () {
			// game.stage.backgroundColor = '#2384e7';
			game.state.start('loader');
		};
	};
	////////////////////////////LOADERSTATE////////////////////////////////////
	var loaderState = function loaderState(game) {
		this.init = function () {
			loading = game.add.image(game.world.centerX, game.world.centerY, 'loading');
			loading.anchor = { x: 0.5, y: 0.5 };
			progressText = game.add.text(game.world.centerX, game.world.centerY + 30, '0%', { fill: '#fff', fontSize: '16px' });
			progressText.anchor = { x: 0.5, y: 0.5 };
			//自动检测游戏窗口变化
			this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
			this.scale.pageAlignHorizontally = true;
			this.scale.pageAlignVertically = true;
		};
		this.preload = function () {
			game.load.audio('gameMusic', 'assets/gameMusic.mp3'); //游戏背景音乐
			// game.load.image('background','assets/background.png');
			game.load.image('proloadPanel', 'assets/proloadPanel.png');
			game.load.image('around_h', 'assets/around_h.png');
			game.load.image('around_v', 'assets/around_v.png');
			game.load.spritesheet('enemy', 'assets/baddie.png', 32, 32);
			game.load.spritesheet('player', 'assets/dude.png', 32, 48);
			game.load.image('logo', 'assets/logo.png');
			game.load.image('button', 'assets/restart.png');
			game.load.image('scorePanel', 'assets/scorePanel.png');
			game.load.image('gameTimer', 'assets/gameTimer.png');
			game.load.spritesheet('snowflakes', 'assets/snowflakes.png', 17, 17);
			game.load.spritesheet('snowflakes_large', 'assets/snowflakes_large.png', 64, 64);
			game.load.onFileComplete.add(function (progress) {
				progressText.text = progress + '%';
			});
			canvasBgfour();
		};
		this.create = function () {
			// 雪花背景
			// snowBg();
			game.music = this.add.audio('gameMusic', 1, true);
			game.music.play('', 0, 1, true);
			loading.kill();
			progressText.destroy();
			var text = game.add.text(0, game.world.height / 15, '电脑端：键盘(上下左右),移动端：触摸,操作超人进行躲避敌人!', { fill: '#fff', fontSize: '35px' });
			text.setShadow(3, 3, 'rgba(0,0,0,0.8)', 2);
			text.x = (game.world.width - text.width) / 2;
			text.alpha = 1;
			//黑色横幅
			var bar = game.add.graphics();
			bar.beginFill(0x000000, 0.5);
			bar.drawRect(0, 25, 1280, 100);
			//  文字内容
			var styleText = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
			var scorePanel = game.add.sprite(game.world.centerX / 2, 180, 'proloadPanel');
			// logo按钮
			game.add.tween(text).from({ alpha: 0 }, 4000, Phaser.Easing.Bounce.Out, true);
			var sprite = game.add.sprite(game.world.centerX, game.world.centerY + 55, 'logo');
			sprite.anchor.set(0.5);
			game.add.tween(sprite).from({ y: -200 }, 2000, Phaser.Easing.Bounce.Out, true);
			sprite.inputEnabled = true;
			sprite.events.onInputDown.add(function () {
				game.state.start('main');
			}, this);
		};
	};
	//////////////////////////MAINSTATE////////////////////////////////
	var mainState = function mainState(game) {

		var score = 1;
		var timeStr;
		var timeStrs;
		var enemy = [];
		var enemys;
		var enemy;
		var player;
		var around;
		var cursors;
		var playerV = 150;

		this.create = function () {
			// snowBg();
			$("#icon_1").show();
			$("#icon_2").show();
			game.physics.startSystem(Phaser.ARCADE);
			enemys = game.add.group();
			enemys.enableBody = true;
			enemy = game.add.sprite(0, 0, 'baddie');
			enemy.animations.add('baddie', [0, 1, 2, 3], 4, true);
			enemy.animations.play('baddie', 8, true);
			enemys.create(32, 32, 'enemy');

			around = game.add.group();
			around.enableBody = true;
			around.create(0, 0, 'around_h');
			around.create(game.world.width - 30, 0, 'around_h');
			around.create(0, 0, 'around_v');
			around.create(0, game.world.height - 30, 'around_v');

			player = game.add.sprite(0, 0, 'player');
			game.physics.arcade.enable(player);
			player.x = (game.world.width - player.width) / 2;
			player.y = (game.world.height - player.height) / 2;
			player.scale.setTo(0.7);
			player.inputEnabled = true;
			player.input.enableDrag(false);

			loopMove(enemys.getChildAt(0), 3, 3);
			var scoreTimer = game.add.sprite(game.world.centerX / 1.4, 50, 'gameTimer');
			// 计时统计面板
			timeStr = game.add.text(0, game.world.height / 9 - 5, "当前时间:" + score, { fill: '#fff', fontSize: '32px' });
			timeStrs = game.add.text(-200, game.world.height / 9, score, { fill: '#fff', fontSize: '32px' });

			game.time.events.add(Phaser.Timer.SECOND * 10, twoEnemys, this);
			game.time.events.add(Phaser.Timer.SECOND * 20, threeEnemys, this);
			game.time.events.add(Phaser.Timer.SECOND * 30, fourEnemys, this);
			game.time.events.add(Phaser.Timer.SECOND * 40, fiveEnemys, this);
			game.time.events.add(Phaser.Timer.SECOND * 50, sixEnemys, this);
			game.time.events.add(Phaser.Timer.SECOND * 60, sevenEnemys, this);
			player.animations.add('left', [0, 1, 2, 3], 10, true);
			//添加动画，左执行1-4帧，10帧每秒速度播放，循环播放
			player.animations.add('right', [5, 6, 7, 8], 10, true);
			//添加动画，右执行1-4帧，10帧每秒速度播放，循环播放
		};
		function twoEnemys() {
			enemys.create(32, 32, 'enemy');
			loopMove(enemys.getChildAt(1), 3, 3);
			console.log("第二个敌人");
		}
		function threeEnemys() {
			enemys.create(32, 32, 'enemy');
			loopMove(enemys.getChildAt(2), 3, 3);
			player.scale.setTo(0.6);
			enemys.getChildAt(0).scale.setTo(0.6, 0.6);
			enemys.getChildAt(1).scale.setTo(0.6, 0.6);
			enemys.getChildAt(2).scale.setTo(0.6, 0.6);
			// player.y = 660;
			canvasBgfour();
			console.log("第三个敌人");
		}
		function fourEnemys() {
			enemys.create(32, 32, 'enemy');
			loopMove(enemys.getChildAt(3), 3, 3);
			player.scale.setTo(0.5);
			enemys.getChildAt(0).scale.setTo(0.5, 0.5);
			enemys.getChildAt(1).scale.setTo(0.5, 0.5);
			enemys.getChildAt(2).scale.setTo(0.5, 0.5);
			enemys.getChildAt(3).scale.setTo(0.5, 0.5);
			// player.y = 665;
			canvasBgthree();
			console.log("第四个敌人");
		}
		function fiveEnemys() {
			canvasBgtwo();
			enemys.create(32, 32, 'enemy');
			loopMove(enemys.getChildAt(4), 3, 3);
			player.scale.setTo(0.4);
			enemys.getChildAt(0).scale.setTo(0.4, 0.4);
			enemys.getChildAt(1).scale.setTo(0.4, 0.4);
			enemys.getChildAt(2).scale.setTo(0.4, 0.4);
			enemys.getChildAt(3).scale.setTo(0.4, 0.4);
			enemys.getChildAt(4).scale.setTo(0.4, 0.4);
			// player.y = 670;
			console.log("第五个敌人");
		}
		function sixEnemys() {
			canvasBgone();
			enemys.create(32, 32, 'enemy');
			loopMove(enemys.getChildAt(5), 3, 3);
			player.scale.setTo(0.3);
			enemys.getChildAt(0).scale.setTo(0.3, 0.3);
			enemys.getChildAt(1).scale.setTo(0.3, 0.3);
			enemys.getChildAt(2).scale.setTo(0.3, 0.3);
			enemys.getChildAt(3).scale.setTo(0.3, 0.3);
			enemys.getChildAt(4).scale.setTo(0.3, 0.3);
			enemys.getChildAt(5).scale.setTo(0.3, 0.3);
			// player.y = 675;
			console.log("第六个敌人");
		}
		function sevenEnemys() {
			canvasBgone();
			enemys.create(32, 32, 'enemy');
			loopMove(enemys.getChildAt(6), 3, 3);
			player.scale.setTo(0.2);
			enemys.getChildAt(0).scale.setTo(0.2, 0.2);
			enemys.getChildAt(1).scale.setTo(0.2, 0.2);
			enemys.getChildAt(2).scale.setTo(0.2, 0.2);
			enemys.getChildAt(3).scale.setTo(0.2, 0.2);
			enemys.getChildAt(4).scale.setTo(0.2, 0.2);
			enemys.getChildAt(5).scale.setTo(0.2, 0.2);
			enemys.getChildAt(6).scale.setTo(0.2, 0.2);
			// player.y = 680;
			console.log("第七个敌人");
		}
		this.update = function () {
			cursors = game.input.keyboard.createCursorKeys(); //键盘事件
			if (player.alive) {
				player.body.velocity.x = 0; //加速度默认值0
				player.body.velocity.y = 0;
				if (cursors.left.isDown) {
					player.body.velocity.x = -playerV;
					player.animations.play('left');
				} else if (cursors.right.isDown) {
					player.body.velocity.x = +playerV;
					player.animations.play('right');
				}
				else if (cursors.up.isDown) {
					player.body.velocity.y = -playerV;
					// player.animations.play('right');
				}else if (cursors.down.isDown) {
					player.body.velocity.y = +playerV;
					// player.animations.play('right');
				}
				else {
						player.animations.stop();
						player.frame = 4; //第四帧
					}
				game.physics.arcade.overlap(player, around, function () {
					game.state.start('theEnd');
					// player.body.collideWorldBounds = true;
				});
				game.physics.arcade.overlap(player, enemys, function () {
					game.state.start('theEnd');
				});
			}
		};
		this.render = function () {
			// game.debug.text('Time until event: ' + timer.duration.toFixed(1), 350, 128,{fill:'#fff',fontSize:'48px'});
			// game.debug.text('当前时间: ' + total    + "s", 350, 128,{fill:'#fff',fontSize:'48px'});
			if (score > 0) {
				score += 0.01;
				timeStr.text = score.toFixed(1);
				timeStrs.text = score.toFixed(1);
			}
			ts = timeStrs.text;
            // 修改计时得分
			timeStr.x = (game.world.width - timeStr.width) / 2 + 105;
		};
	};

	//////////////////////////THEENDSTATE 结束界面///////////////////////////////////////
	var theEndState = function theEndState(game) {
		this.create = function () {
			var scoreTimer = game.add.sprite(game.world.centerX / 1.9, 50, 'scorePanel');
			var styles = { font: "35px Arial", fill: "#fff", align: "center" };
			var text = game.add.text(0, game.world.height / 4 + 28, '', styles);
			text.text = ts;
			text.x = (game.world.width - text.width) / 2 + 95;
			var button = game.add.button(0, -200, 'button', function () {
				location.reload();
			});
			button.x = (game.world.width - button.width) / 2 + 20;
			game.add.tween(button).to({ y: game.world.centerY }, 2000, Phaser.Easing.Bounce.Out, true);
		};
	};
	///////////////////////////PUBLIC/////////////////////////////////////////////////
	var game = new Phaser.Game(1024, 660, Phaser.AUTO, 'container', '', true);
	game.state.add('boot', bootState);
	game.state.add('loader', loaderState);
	game.state.add('main', mainState);
	game.state.add('theEnd', theEndState);
	game.state.start('boot');
	///////////////////////////FUNCTION////////////////////////////////////////////////
	function loopMove(obj, x, y) {
		game.time.events.loop(Phaser.Timer.SECOND / 70, function () {
			if (obj.x <= 30) {
				x = -x;
			}
			if (obj.y <= 30) {
				y = -y;
			}
			//有效活动范围
			if (obj.x > game.world.width - 30 - obj.width) {
				x = -x;
			}
			if (obj.y > game.world.height - 30 - obj.height) {
				y = -y;
			}
			// obj.x = obj.x + x;
			obj.x = obj.x + x;
			obj.y = obj.y + y;
		}, this);
	}
};
	</script>
</body>
</html>